<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="确认订单"></c-nav-bar>
		<view class="car_tip">
			<image src="https://i.ringzle.com/file/20231114/6731af15e0624cc6af198efae3214183.png"></image>
			<text>【温馨提示】离场时间延时，将重新计费</text>
		</view>
		<view class="car_info">
			<view class="t_addr">
				<text class="title">{{item.from}}-{{item.park}}</text>
				<view class="t_dz">
					<image src="https://i.ringzle.com/file/20231106/e3d8756b026849a69a24980df25bf3af.png"></image>
					<text>{{item.address}}</text>
				</view>
			</view>
			<view class="t_items">
				<view class="ti_item">
					<text>进场时间</text>
					<text>{{item.inTime}}</text>
				</view>
				<view class="ti_item">
					<text>离场时间</text>
					<text>{{item.outTime}}</text>
				</view>
				<view class="ti_item">
					<text>预约车牌</text>
					<text>{{item.licence}}</text>
				</view>
				<view class="ti_item">
					<text>预约手机号</text>
					<text>{{item.phone}}</text>
				</view>
				<view class="ti_item">
					<text>预估价格</text>
					<text>￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="b_left">
				<view class="bl_top">待支付</view>
				<view class="bl_price">￥<text>{{item.price}}</text></view>
			</view>
			<view class="b_right" @tap="surePay">
				去支付
			</view>
		</view>
		<WechatPay ref="wxPay" @confirmPay="toPay"></WechatPay>
	</view>
</template>

<script>
	import WechatPay from '@/compoments/wechatPay/index.vue'
	export default {
		components:{WechatPay},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item:null,
				inOutTime:''
			}
		},
		onLoad(option) {
			if(option.item){
				this.item = JSON.parse(option.item);
				this.item.inTime = new Date(this.item.inTime).Format('yyyy-MM-dd hh:mm');
				this.item.outTime = new Date(this.item.outTime).Format('yyyy-MM-dd hh:mm');
			} 
		},
		methods: {
			surePay(){
				this.$refs.wxPay.payShow = true;
			},
			toPay(){
				this.$api.post('/order/icbc/createOrder',{
					orderCode:this.item.orderCode,
					tradeType:'JSAPI',
					openId:JSON.parse(uni.getStorageSync('userInfo')).openId
				},false).then(res=>{
					if(res.statusCode==200&&res.data!=null){
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result=>{
							uni.navigateTo({
								url:'/pagesIndex/parkingService/bookSuccessfully?item='+JSON.stringify(this.item)
							})
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding-bottom: 0 24rpx 194rpx;
		background: #F5F8FA;
		display: flex;
		flex-direction: column;
		align-items: center;
		&>view{
			width: calc(100% - 96rpx);
			padding: 20rpx 24rpx 30rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
		}
		
		.car_tip{
			padding: 14rpx 24rpx;
			background: #F6EDE5;
			display: flex;
			align-items: center;
			image{
				width: 28rpx;
				height: 29rpx;
			}
			text{
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF5E00;
				margin-left: 3rpx;
			}
		}
		
		.car_info{
			.t_addr{
				.title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.t_dz{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					image{
						width: 20rpx;
						height: 24rpx;
					}
					text{
						margin-left: 14rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.t_items{
				margin-top: 20rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				.ti_item{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						&:first-child{
							color: #999999;
						}
						&:last-child{
							color: #333333;
						}
					}
				}
			}
		}
		
		.pay_detail{
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.pd_total{
				margin-top: 20rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				&>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.pdt_fwf{
					margin-top: 30rpx;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						&:first-child{
							color: #999999;
						}
						&:last-child{
							color: #333333;
						}
					}
				}
				.pdt_hj{
					margin-top: 24rpx;
					text{
						font-family: PingFang SC;
						&:first-child{
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
						}
						&:last-child{
							font-size: 40rpx;
							font-weight: 800;
							color: #FE401A;
						}
					}
				}
			}
		}
	
		.bottom{
			width: calc(100% - 58rpx);
			padding: 20rpx 24rpx 62rpx 34rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.b_left{
				display: flex;
				flex-direction: column;
				.bl_top{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-left: 12rpx;
				}
				.bl_price{
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					font-size: 31rpx;
					font-family: PingFangSC-Regular;
					color: #FE401A;
					text{
						font-size: 51rpx;
						font-family: Arial-BoldMT;
						color: #FE401A;
					}
				}
			}
			.b_right{
				width: 254rpx;
				height: 92rpx;
				background: #007A69;
				border-radius: 12rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>